<template>
  <div class="page_storage_config">
    <div>
      <Row style="background: #ffffff;padding: 50px 100px">
        <Col span="12" style="text-align: center">
          <i-circle
            :size="250"
            :trail-width="4"
            :stroke-width="5"
            :percent="97"
            stroke-linecap="square"
            stroke-color="#ff5500">
            <div class="demo-Circle-custom">
              <h1>3G</h1>
              <p>可用磁盘空间</p>
              <span>
                当前磁盘空间剩余量
                <i>3%</i>
            </span>
            </div>
          </i-circle>
          <div style="color: red;margin-top: 10px">可用磁盘空间即将耗尽，请及时处理！</div>
        </Col>
        <Col span="12" style="text-align: center">
          <i-circle
            :size="250"
            :trail-width="4"
            :stroke-width="5"
            :percent="90"
            stroke-linecap="square"
            stroke-color="#5cb85c">
            <div class="demo-Circle-custom">
              <h1>200</h1>
              <p>剩余未转码视频</p>
              <span>
                已转码数量比例
                <i>90%</i>
            </span>
            </div>
          </i-circle>
          <div style="color: #5cb85c;margin-top: 10px">视频转码组件运作正常</div>
        </Col>
      </Row>
    </div>


  </div>
</template>

<script>
  import tables from '@/components/tables'

  export default {
    components: {tables},
    name: "page_storage_config",
    data() {
      return {}
    },
    methods: {
      pageChg() {

      }
    },
    created() {
    }
  }
</script>
